import React, { useState } from 'react'
import PubSub from 'pubsub-js'
import axios from 'axios'
export default function Header() {
    //让表单受控
    const [search, setSearch] = useState("")
    //将表单变化的结果，给到state
    const changeSearchHandle = (e) => {
        setSearch(e.target.value)
    }
    //按钮搜索，发送请求
    const searchHandle = async () => {
       const result =await axios.get('https://api.github.com/search/users?q=' + search);
        // console.log(result);
        PubSub.publish('github',result)
    }
    return (
        <section className="jumbotron">
            <h3 className="jumbotron-heading">Search Github Users</h3>
            <div>
                <input type="text" onChange={changeSearchHandle} value={search} placeholder="enter the name you search" />&nbsp;
                <button onClick={searchHandle}>Search</button>
            </div>
        </section>
    )
}
